html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu,span,a,nav,article,aside,dialog,header,section,footer{margin:0;padding:0;box-sizing:border-box;}
header,footer,section,article,aside,nav,dialog,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
p{margin:1em 0;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,"sans-serif";color:#333;outline:0;}
body{background:#fff;}
html,body,.wrap,.main{height:100%;}
a { color: #337ab7; }
.sv-item:after,
.libs-nav-item:after,
.lbr-tb:after,
.ptem:after,
.item:before,
.item:after { content: ''; display: block; clear: both; height: 0; overflow: hidden; }
.block { display: block; }
.tac { text-align: center; }
.tar { text-align: right; }
.muted { font-size: 12px; color: #999;word-wrap: break-word; }
.btn { display: inline-block; padding: 5px 15px; border: 1px solid rgba(0,0,0,.1); border-radius: 4px; color: #fff; }
.btn:hover { border-color: rgba(0,0,0,.3); }
.btn-block { display: block; width: 100%; }
.btn-default { background: #ddd; color: #555; }
.btn-default.active,
.btn-primary { background: #337ab7; color: #fff; }
.btn-top:hover{ border-color: #ccc; }
.btn-top { background: #000; color: #fff; border: 1px solid #fff; min-width: 100px;text-align: center; }
.btn-info { background: #55b8da; }
.btn-warn { background: #f0ad5e; }
.t1 { font-size: 30px; }
.t2 { font-size: 20px; }
.t3 { font-size: 16px; }
.danger { font-family: tahoma, 'sans-serif'; color: #c30; }
input,
select,
textarea { width: 100%; height: 30px; padding: 3px 5px; vertical-align: middle; }
input:focus,
select:focus,
textarea:focus { border-color: #999; }
select { padding-right: 22px; background: url('') no-repeat right 6px / 21px 16px; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
select::-ms-expand { display: none; }
textarea { padding: 5px; height: 80px; }
input.sm,
input.mdsm { width: 40px; padding: 5px; text-align: center; }
input.mdsm { width: 50px; }
input.md { width: 75px; padding: 5px; }
input::-webkit-outer-spin-button,  
input::-webkit-inner-spin-button{  
    -webkit-appearance: none !important;  
    margin: 0;  
} 
/*布局*/
.wrap { background: #1e2722; background: rgb(25,35,50); }
.top { position: fixed; min-width: 1000px; padding: 18px 20px; top: 0; left: 0; width: 100%; height: 65px; background: #fff; z-index: 1; box-shadow:0px 0px 2px 1px #aaa}
.main { display: flex; min-width: 1000px; padding: 100px 20px 20px; }
.libs-nav { width: 240px; margin-right: 20px; }
.wk-box { position: relative; flex: 1; padding: 20px; margin: 0 20px 0 0; background: #fff; font-size: 14px; }
.wk-box,
.pp-box { overflow-y: auto; }
.preview::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.wk-box::-webkit-scrollbar,
.pp-box::-webkit-scrollbar { width: 10px; height: 10px; }
.preview::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.wk-box::-webkit-scrollbar-thumb { background-color: #999; border-left: 5px solid #fff; }
.pp-box::-webkit-scrollbar-thumb { background-color: #fff; border-left: 5px solid #222; }
.pp-box { width: 320px; }
.skin-box { margin-left: 260px; }

/*顶部*/
.top { font-size: 12px; background: rgb(0,0,0); }
.top>div { float: left; width: 33.33333333%; }
.top-logo { line-height: 30px; font-size: 16px; color: #fff; }
.top-logo img { height: 30px; }
.top-step { text-align: center; }
.top-step,
.top-step a { text-align: center; color: #eee; font-size: 16px; }
.top-step a { margin: 0 15px; }
.top-step a.active { color: #5bf; }
.top-step ul ,.top-step ul li{ list-style: none; float: left;}
.top-op { text-align: right; }
.top-op .btn { margin-left: 15px; }

/*左侧*/
.libs-nav-item { margin-bottom: 15px; background: #fff; text-align: center; font-size: 12px; }
.libs-nav-item dt { height: 40px; line-height: 40px; border-bottom: 1px solid #ddd; font-weight: bold; }
.libs-nav-item dd { float: left; width: 33.33333333%; height: 60px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
.libs-nav-item dd:nth-child(3n-1) { border-left: 1px solid #ddd; }
.libs-nav-item dd:hover { box-shadow: inset 0 0 10px #ddd; cursor: pointer; }
.libs-nav-item dd .ddin { display: block; padding: 13px 0; line-height: 17px; }
.libs-nav-item dd .item-delete{position: relative;top: -57px;left: 28px;}
.libs-nav-item dd.quick{width:100%;padding-top:15px;margin-top:10px;}

.libs-nav-item .iconfont { font-size: 18px; }
.libs-nav-item .iconfont-crc { font-size: 17px; }
.lbr-tb { width: 50%; margin: 9px 25% 2px; }
.lbr-tb span { display: block; width: 100%; height: 7px; margin-bottom: 2px; overflow: hidden; border: 1px solid #999; }
.lbr-tb-2 span,
.lbr-tb-3 span { float: left; width: 46%; height: 12px; }
.lbr-tb-2 .lbr-td-1 { width: 100%; }
.lbr-tb-2 .lbr-td-3 { float: right; }
.lbr-tb-3 span { float: right; }
.lbr-tb-3 .lbr-td-1 { float: left; height: 26px; }

/*工作区域*/
.headers { width: 50%; min-width: 500px; height: 30%; min-height: 310px; margin: 0px auto; padding: 30px; background: #fff; }
.hds-tit { text-align: center; font-weight: bold; margin-bottom: 10px; }
.headers .hd { line-height: 40px; }
.handle {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(77,166,255,.08); }
.handle span { display: block; position: absolute; width: 16px; height: 16px; border-radius: 10px; cursor: pointer; background-image: url(''); }
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
  .handle span { background-image: url(''); background-size: 64px 16px; }
}
.handle .close { right: -7px; }
.handle .clone { left: -7px; bottom: -7px; background-position: -48px 0; }
.handle .toup,
.handle .close { top: -7px; }
.handle .toup,
.handle .todown { left: 50%; top: -7px; margin-left: -10px; background-position: -16px 0; }
.handle .todown { top: auto; bottom: -7px; background-position: -32px 0; }

.item { position: relative; clear: both; padding: 10px 15px; border: 1px dashed transparent; line-height: 20px; }
.item .hd .tit{word-wrap: break-word;}
.item-1d2 { float: left; clear: none; width: 50%; }
.item.active { border-color: #ddd; }
.upbox,
.item input,
.item select,
.item textarea { height: 40px; padding: 3px 8px; vertical-align: middle; }
.item select { padding: 5px; background-position: right 10px; }
.item textarea { height: 80px; padding: 8px; }
.item input[type='radio'],
.item input[type='checkbox'] { width: auto; height: auto; }
.item .tb input[type='input']{
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}



.i6d6,
.i5d6,
.i4d6,
.i3d6,
.i2d6,
.i1d6 { float: left; width: 100%; margin: 5px 5% 5px 0; }
.i5d6 { width: 82.5%; }
.i4d6 { width: 65%; }
.i3d6 { width: 47.5%; }
.i2d6 { width: 30%; }
.i1d6 { width: 12.5%; }

.ml5 { margin-left: 87.5%; }
.ml4 { margin-left: 70%; }
.ml3 { margin-left: 52.5%; }
.ml2 { margin-left: 35%; }
.ml1 { margin-left: 17.5%; }

.i6d6:last-child,
.i5d6:last-child,
.i4d6:last-child,
.i3d6:last-child,
.i2d6:last-child,
.i1d6:last-child,
.item>div:last-child,
.item>div>div:last-child,
.item[data-type='checkbox'] .i1d6:nth-child(6n),
.item[data-type='checkbox'] .i2d6:nth-child(3n),
.item[data-type='checkbox'] .i3d6:nth-child(2n),
.item[data-type='checkbox'] .i3d6:nth-child(2n) { margin-right: 0; }
.item-radio label,
.item-checkbox label { font-size: 12px; }
.item-radio label input,
.item-checkbox label input { margin-right: 2px; margin-top: -2px; }
.upbox { position: relative; padding-left: 5%; border: 2px dashed #ccc; overflow: hidden; line-height: 30px; }
.upbox input { position: absolute; border: none; font-size: 100px; right: 0; bottom: 0; opacity: 0; }
.upbox .iconfont { font-size: 16px; }


.tb { border: 1px solid #ccc; border-width: 1px 0 0 1px; }
.tb table { width: 100%; }
.tb th,
.tb td { padding: 5px 10px; border: 1px solid #ccc; border-width: 0 1px 1px 0; }


.word-box { position: relative; padding-right: 60px;  overflow: hidden; text-overflow: ellipsis; word-wrap:break-word;  }
.word-autoh { height: auto; padding: 0 0 20px; white-space: normal;}
.word-box .switch-btn { position: absolute; right: 0; top: 0;  }
.word-autoh .switch-btn { bottom: 0; top: auto; }


.pager { padding: 20px; text-align: center; }
.pager+.pager { border-top: 3px dashed #ddd; }


.hr { clear: both; margin-bottom: 20px 0; padding-top: 5px; color: #888; border-top: 2px solid #ddd; }
.hr-dashed { border-top-style: dashed; }
.hr-dotted { border-top-style: dotted; }
.hr-double { padding: 5px 0; border-bottom: 2px solid #ddd;    border-top: 2px solid #ddd;height: 5px; line-height: 33px;}

.hasunit { position: relative; }
.hasunit input { padding-right: 60px; }
.hasunit .type { position: absolute; top: 0; right: 12px; font: 14px/40px arial; text-align: right; }




/* 右侧属性 */
.pp-box hr { clear: both; margin: 8px 0; border: none; border-top: 1px dotted #999; }
.proup { padding: 8px 0; background: #fff; }
.proup+.proup { margin-top: 20px; }
.ptem { padding: 2px 15px; }
.ptem>div { line-height: 30px; }
.ptem>div>div { margin-top: 0; margin-bottom: 0; }
.ptem,
.ptem input,
.ptem select,
.ptem textarea { font-size: 12px; }
.ptem input { border-width: 0 0 1px 0; }
/*.el-input--suffix .el-input__inner,
.el-select .el-input.is-focus .el-input__inner { border: none; }*/
.ptem input[type='radio'],
.ptem input[type='checkbox'] { width: auto; height: auto; margin-right: 3px; }
.ptem:last-child { border: none; }
.ptem>div:last-child,
.ptem>div>div:last-child { margin-right: 0; }
.ptem .i2d6:nth-child(3n),
.ptem .i3d6:nth-child(2n) { margin-right: 0; }

.sltem { height: 36px; border: 1px dashed transparent; padding: 5px; }
.sltem:hover { border-color: #ddd; background: rgba(77,166,255,.08); }
.sltem .iconfont { display: none; float: right; line-height: 25px; }
.sltem:hover .iconfont { display: inline-block; }
.sltem input { float: left; width: 240px; margin-right: 5px; background: none; }

.btn-group { display: table; }
.btn-group .btn { display: table-cell; width: auto; line-height: 25px; padding: 0; border-radius: 0; text-align: center; border-left-color: rgba(255,255,255,.3); }
.btn-group .btn:first-child { border-radius: 3px 0 0 3px; border-left-color: rgba(0,0,0,.1); }
.btn-group .btn:last-child { border-radius: 0 3px 3px 0; }
.btn-group .btn:hover,
.btn-group .btn.active { border-color: rgba(0,0,0,.3); }
.btn-group.btn-group-has1 .btn { border-radius: 3px; }

.page-title { clear: both;line-height: 60px; font-size: 18px; text-align: center; }
.page-describe{clear: both; text-align: center;}
.skin-colos a { float: left; width: 33.33333333%; padding-bottom: 33.33333333%; position: relative; z-index: 0; }
.skin-colos a:hover { box-shadow: 0 0 10px #ccc; z-index: 1; }
.skin-colos .active:after { content: ''; left: 35%; top: 30%; width: 29px; height: 19px; border-left: 2px solid #68a1fd; border-bottom: 2px solid #68a1fd; position: absolute; transform: rotate(-45deg); }
.c-fff{ background: #fff; }
.c-eee{ background: #eee; }
.c-222{ background: #222; color: #fff;}
.c-f6dbd8{ background: #f6dbd8; }
.c-c8efe9{ background: #c8efe9; }
.c-cfdfc5{ background: #cfdfc5; }
.c-cee1f9{ background: #cee1f9; }
.c-c1c1d7{ background: #c1c1d7; }
.c-f5f2e6{ background: #f5f2e6; }
.c-e6f0e6{ background: #e6f0e6; }
.skin-fff .page-title{ background: #fff; }

.skin-eee .page-title{ background: #eee; }
.skin-eee input { box-shadow: inset 0 0 5px #eee; }
.skin-eee .btn-info{background: #eee;color: #222;}
.skin-eee .upload-file button{background: #eee;border-color: #eee; color: #222;}

.skin-222 .page-title{ background: #222; color: #fff;}
.skin-222 input { box-shadow: inset 0 0 5px #ccc; }
.skin-222 .btn-info{background: #222;color: #fff;}
.skin-222 .upload-file button{background: #222;border-color: #222; color: #fff;}

.skin-f6dbd8 .page-title{ background: #f6dbd8; }
.skin-f6dbd8 .upload-file button{background: #f6dbd8;}
.skin-f6dbd8 input { box-shadow: inset 0 0 5px #f6dbd8; }
.skin-f6dbd8 .btn-info{background: #f6dbd8;color: #222;}
.skin-f6dbd8 .upload-file button{background: #f6dbd8;border-color: #f6dbd8; color: #222;}

.skin-c8efe9 .page-title{ background: #c8efe9; }
.skin-c8efe9 input { box-shadow: inset 0 0 5px #c8efe9; }
.skin-c8efe9 .btn-info{background: #c8efe9;color: #222;}
.skin-c8efe9 .upload-file button{background: #c8efe9;border-color: #c8efe9; color: #222;}

.skin-cfdfc5 .page-title{ background: #cfdfc5; }
.skin-cfdfc5 input { box-shadow: inset 0 0 5px #cfdfc5; }
.skin-cfdfc5 .btn-info{background: #cfdfc5;color: #222;}
.skin-cfdfc5 .upload-file button{background: #cfdfc5;border-color: #cfdfc5; color: #222;}

.skin-cee1f9 .page-title{ background: #cee1f9; }
.skin-cee1f9 input { box-shadow: inset 0 0 5px #cee1f9; }
.skin-cee1f9 .btn-info{background: #cee1f9;color: #222;}
.skin-cee1f9 .upload-file button{background: #cee1f9;border-color: #cee1f9; color: #222;}

.skin-c1c1d7 .page-title{ background: #c1c1d7; }
.skin-c1c1d7 input { box-shadow: inset 0 0 5px #c1c1d7; }
.skin-c1c1d7 .btn-info{background: #c1c1d7;color: #222;}
.skin-c1c1d7 .upload-file button{background: #c1c1d7;border-color: #c1c1d7; color: #222;}

.skin-f5f2e6 .page-title{ background: #f5f2e6; }
.skin-f5f2e6 input { box-shadow: inset 0 0 5px #f5f2e6; }
.skin-f5f2e6 .btn-info{background: #f5f2e6;color: #222;}
.skin-f5f2e6 .upload-file button{background: #f5f2e6;border-color: #f5f2e6; color: #222;}

.skin-e6f0e6 .page-title{ background: #e6f0e6; }
.skin-e6f0e6 input { box-shadow: inset 0 0 5px #e6f0e6; }
.skin-e6f0e6 .btn-info{background: #e6f0e6;color: #222;}
.skin-e6f0e6 .upload-file button{background: #e6f0e6;border-color: #e6f0e6;color: #222; }

/* 弹出层 */
.mask { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,.3); }
.pop { display: none; position: absolute; left: 50%; top: 50%; border: 1px solid #ccc; box-shadow: 0 0 10px #ccc; background: #fff; font-size: 12px; }
.save { width: 420px; max-height: 300px; margin: -150px 0 0 -210px; padding: 10px 30px; }
.sv-item { margin: 15px 0; line-height: 30px; }
.alert { width: 400px; max-height: 200px; margin: -100px 0 0 -200px; text-align: center; }
.alert-bd { padding: 20px; }
.pop .close-btn { position: absolute; right: 5px; top: 5px; font-size: 20px; color: #666; }
.pop .close-btn:hover { color: #000; }

/* 预览框 */
.preview,
.preview-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: rgba(0,0,0,.8);     overflow-y: auto;}
.preview { padding: 20px; top: 60px; right: 220px; bottom: 60px; left: 220px; background: #fff; }

.tmp-wk{position: absolute; top: 100px; left: 100px;background-color: #fff;}
.tmp-wk>div{min-width: 300px;}
.tmp-place { clear: both; height: 20px; border: 2px dashed #ddd; }

.sledit-wrap,
.sledit-mask { position: fixed; height: 100%; width: 100%; min-width: 600px; left: 0; top: 0;     z-index: 1;}
.sledit-mask { background: rgba(255,255,255,.7); }
.sledit-box { position: fixed; left: 50%; top: 50%; margin: -250px 0 0 -400px; width: 800px; height: 500px; background: #fff; box-shadow: 0 0 10px #999;    z-index: 2; }
.sledit-box .icon-close { position: absolute; right: 10px; top: 10px; font-size: 20px; color: #333; }
.sledit-tit { padding: 15px 0; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.sledit-tit-sub { padding: 20px 0 10px; font-size: 13px; }
.sledit-bd { padding: 0 20px 20px; overflow: hidden; }
.sledit-ed,
.sledit-op { float: left; width: 60%; }
.sledit-op {  width: 40%; border-left: none; }
.sledit-ed textarea,
.sledit-op select,
.sledit-op textarea { height: 330px; border: 1px solid #ddd; }
.sledit-op select,
.sledit-op textarea { float: left; width: 50%; border-left: none; list-style: disc; }
.sledit-ft { padding: 0 20px; }
.sledit-ft .btn { margin: 0 0 0 15px; }
/*组件自身宽度比例 add max.hu*/
.w20,.w25,.w33, .w40, .w50,.w60, .w80, .w100 { float: left; clear: none; width: 20%; }
/* 25 最多四个 33 最多三个 50 最多两个 */
.w25 { width: 25%; }
.w33 { width: 33%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w80 { width: 80%; }
.w100 { width: 100%; }

.c1,.c2,.c3, .c4{ float: left; clear: none; width: 100%; }
/* 25 最多四个 33 最多三个 50 最多两个 */
.c2 { width: 45%; }
.c3 { width: 30%; }
.c4 { width: 20%; }
.required{color:red;}
.step-next{margin: 0px auto; width:100%;height: 50px;background: rgb(25,35,50);text-align: center;}
.first-setp-next { position: relative; top: -200px; }
/* elemnetUI style extends*/
.el-date-editor--daterange.el-input__inner{width: 280px;}
.el-date-editor .el-range-separator{width:10%;}
.el-date-editor--timerange.el-input__inner{width:280px;}
.el-checkbox+.el-checkbox.ckb{margin-left:0;margin-right: 8px;}
.el-checkbox.ckb{margin-left:0;margin-right: 8px;}
.el-radio+.el-radio.ckb{margin-left:0;margin-right: 8px;}
.el-radio.ckb{margin-left:0;margin-right: 8px;}
.bd .el-radio-group{width:100%;}
.el-date-editor.el-input,.el-cascader,.el-select{width:100%;}
/* step style */
.el-steps--simple{padding: 10px 8%;background: none;}
.el-step__title.is-process{color:#ccc; font-weight: normal;}
.el-step__head.is-process{color:#ccc;}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 100%;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
